import HandleBtn from '@/components/HandleBar/btn';
import Tabs, { TabsProps } from '@/components/Tabs';
import { statisticPocEnergyV1ControllerExportReport } from '@/services/ess/statisticPocEnergy';
import { downloadFetch } from '@/utils/downloadFile';
import { useIntl, useModel } from '@@/exports';
import { Radio, Space } from 'antd';
import dayjs from 'dayjs';
import React, { useRef, useState } from 'react';
import DayChart from './components/DayChart';
import MonthChart from './components/MonthChart';
import NetReport from './components/NetReport';
import YearChart from './components/YearChart';

type ToolBarProps = {
  tableRef: React.MutableRefObject<null>;
};
const Net: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [reportData, setReportData] = useState({
    date: dayjs().format('YYYY-MM-DD'),
    unit: 'day',
  });
  const [currentTab, setCurrentTab] = useState('day');
  const [radioValue, setRadioValue] = useState('chart');
  const electricRef = useRef(null);
  const changeReportData = (reportData) => {
    setReportData(reportData);
  };
  const intl = useIntl();
  const items: TabsProps['items'] = [
    {
      key: 'day',
      label: intl.formatMessage({
        id: 'statistics.analyze.dayReportS',
      }),
      children:
        radioValue === 'list' ? (
          <NetReport dateType={'date'} changeReportData={changeReportData} />
        ) : (
          <DayChart />
        ),
    },
    {
      key: 'month',
      label: intl.formatMessage({
        id: 'statistics.analyze.monthReportS',
      }),
      children:
        radioValue === 'list' ? (
          <NetReport dateType={'month'} changeReportData={changeReportData} />
        ) : (
          <MonthChart />
        ),
    },
    {
      key: 'year',
      label: intl.formatMessage({
        id: 'statistics.analyze.yearReportS',
      }),
      children:
        radioValue === 'list' ? (
          <NetReport dateType={'year'} changeReportData={changeReportData} />
        ) : (
          <YearChart />
        ),
    },
  ];

  const exportReport = () => {
    const params = {
      ...reportData,
      stationId: initialState?.stationId,
      unit: currentTab,
    };
    downloadFetch(statisticPocEnergyV1ControllerExportReport, params);
  };
  const ToolBarRender: React.FC<ToolBarProps> = () => {
    return (
      <>
        <Space>
          <div>
            <Radio.Group
              value={radioValue}
              onChange={(e) => {
                setRadioValue(e.target.value);
              }}
              buttonStyle="solid"
              className="global-group-radio-button"
            >
              <Radio.Button value={'list'}>
                {intl.formatMessage({
                  id: 'statistics.common.list',
                })}
              </Radio.Button>
              <Radio.Button value={'chart'}>
                {intl.formatMessage({
                  id: 'statistics.common.chart',
                })}
              </Radio.Button>
            </Radio.Group>
          </div>
          {radioValue === 'list' && (
            <HandleBtn
              key="export"
              handleType="export"
              onClick={() => {
                exportReport();
              }}
            >
              {intl.formatMessage({ id: 'statistics.common.export' })}
            </HandleBtn>
          )}
        </Space>
      </>
    );
  };

  return (
    <>
      <Tabs
        destroyInactiveTabPane={true}
        items={items}
        activeKey={currentTab}
        tabBarExtraContent={<ToolBarRender tableRef={electricRef} />}
        onChange={(value) => {
          setCurrentTab(value);
          setReportData({
            date:
              value === 'day'
                ? dayjs().format('YYYY-MM-DD')
                : value === 'month'
                ? dayjs().format('YYYY-MM')
                : dayjs().format('YYYY'),
            unit: value,
          });
        }}
      ></Tabs>
    </>
  );
};

export default Net;
